<template>
    <div class="list-style-table-box">
        <table class="rx-list-table"
               :class="{'rx-list-table-border':border,'rx-list-table-color':color}"
        >
            <thead>
                <tr><th></th><th></th><th></th></tr>
            </thead>
            <tbody>
                <tr><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td></tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: "listStyleTable",
    props:{
        border:{//3,4
            default:false
        },
        color:{//2,4
            default:false
        }
    }
}
</script>

<style scoped>
.list-style-table-box{
    display: inline-block;
    vertical-align: middle;
}
.rx-list-table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100px;
    border:1px solid #dedede;
}
.rx-list-table th,
.rx-list-table td{
    padding: 7px 4px;
    border-bottom: 1px solid #dedede;
}
.rx-list-table.rx-list-table-border th,
.rx-list-table.rx-list-table-border td{
    border-right: 1px solid #dedede;
}
.rx-list-table.rx-list-table-color tbody tr:nth-child(even){
    background-color: #FAFAFA;
}
.rx-list-table thead tr{
    background-color: #FAFAFA;
}
</style>